<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑管理员信息</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--    文件拖拽-->
    <link th:href="@{/plugins/dropzone/dropzone.css}">

    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">

    <link rel="stylesheet" th:href="@{/plugins/imgUpload/public/index.css}">

    <link rel="stylesheet" type="text/css" id="style_sheet" th:href="@{/css/skins/default.css}">


</head>
<body>
<div class="dashboard-list">
    <h3 class="heading">
        <span class="navbar-left">Profile Edit</span>
        <div class="navbar-right">
            <a th:href="@{/admin/updateAdmin}"><span class="glyphicon glyphicon-edit"></span>返回上一层</a>
        </div>
    </h3>


    <div class="dashboard-message contact-2 bdr clearfix">
        <div class="row">
            <div class="col-lg-3 col-md-3">
                <!-- Edit profile photo -->
                <div class="edit-profile-photo">
                    <img th:src="${admin.photo}" alt="profile-photo"
                         id="preview_photo" class="img-fluid" name="photo">
                    <div class="change-photo-btn">
                        <div class="photoUpload ">
                            <span><i class="glyphicon glyphicon-open" ></i></span>
                            <input type="file" id="photoFile" class="upload fa fa-upload"  th:onclick="upload()">

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9 col-md-9">
                <form th:action="@{/admin/updateAdmin}" method="post" >
                    <div class="row">
                        <div class="col-lg-6 col-md-6">
                            <div class="form-group subject">
                                <label>Phone</label>
                                <input type="text" name="tell" class="form-control" placeholder="Phone" th:text="${admin.tell}">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <div class="form-group number">
                                <label>Email</label>
                                <input type="email" name="email" class="form-control" placeholder="Email" th:text="${admin.email}">
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <div class="form-group message">
                                <label>Personal info</label>
                                <textarea class="form-control" name="info" placeholder="Personal info" th:text="${admin.info}"/>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="send-btn">
                                <input type="submit" class="btn btn-md button-theme" value="Change Info"/>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    /**
     * 上传图片
     */
    function upload() {
        console.log("11")
        if ($("#photoFile").val() == '') {
            return;
        }
        var formData = new FormData();
        formData.append('photo', document.getElementById('photoFile').files[0]);
        $.ajax({
            url:"[(@{/user/userPhoto})]",
            type:"post",
            data: formData,
            contentType: false,
            processData: false,
            success: function(data) {
                console.log(data);
                if (data.type == "success") {
                    $("#preview_photo").attr("src",data.filepath);
                } else {
                    alert(data.msg);
                }
            },
            error:function(data) {
                alert("上传失败")
            }
        });
    }
</script>


</body>
</html>